<template>
    <div class="warpper-box">
        <a-form layout="inline" ref="formRef" :form="form" class="custom-select">
            <a-form-item label="姓名">
                <a-input v-decorator="['userName']"/>
            </a-form-item>
            <a-form-item label="身份证号码">
                <a-input v-decorator="['idCard']"/>
            </a-form-item>
            <a-form-item label="任务名称">
                <a-input v-decorator="['taskName']"/>
            </a-form-item>
            <a-form-item label="关联企业" v-if="userInfo.type == 3 || userInfo.type == 1">
                <a-input v-decorator="['enterpriseName']"/>
            </a-form-item>
            <a-form-item label="手机号">
                <a-input v-decorator="['phone']"/>
            </a-form-item>
            <template v-if="expand">
                <a-form-item label="关联园区服务商" v-if="userInfo.type == 2 || userInfo.type == 1">
                    <a-input v-decorator="['parkName']"/>
                </a-form-item>
                <a-form-item label="结算批次编号">
                    <a-input v-decorator="['settleBatchCode']"/>
                </a-form-item>
                <a-form-item label="结算批次名称">
                    <a-input v-decorator="['settleBatchName']"/>
                </a-form-item>
                <a-form-item label="任务编号">
                    <a-input v-decorator="['taskId']"/>
                </a-form-item>
                <a-form-item label="结算状态">
                    <a-select v-decorator="['settleStatus']">
                        <a-select-option v-for="userType in settleStateData" :key="userType.value">
                            {{ userType.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="支付通道">
                    <a-select v-decorator="['payChannel']">
                        <a-select-option v-for="userType in payData" :key="userType.value">
                            {{ userType.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="任务类型">
                    <a-select v-decorator="['taskType']">
                        <a-select-option v-for="userType in taskStateData" :key="userType.value">
                            {{ userType.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="签约方式">
                    <a-select v-decorator="['signMode']">
                        <a-select-option v-for="userType in signTypeData" :key="userType.value">
                            {{ userType.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="签约状态">
                    <a-select v-decorator="['signStatus']">
                        <a-select-option v-for="userType in signStateData" :key="userType.value">
                            {{ userType.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="服务费计算方式">
                    <a-select v-decorator="['serviceFeeCalculateMode']">
                        <a-select-option v-for="userType in serviceModeData" :key="userType.value">
                            {{ userType.label }}
                        </a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="结算日期">
                    <a-range-picker v-decorator="['time']" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD"/>
                </a-form-item>
            </template>
             <a-form-item>
                <a style="font-size: 12px" @click="expand = !expand">
                    <template v-if="expand">
                    <a-icon type="up" />收起
                    </template>
                    <template v-else>
                        <a-icon type="down" />展开
                    </template>
                </a>
             </a-form-item>
            
            
            <a-row :gutter="10">
                <a-col :span="24" style="text-align: right;margin-top:20px;margin-bottom: 20px;">
                    <a-button style="margin-right:8px" v-action:settleGrantExportUserBtn @click="exportExcel" icon="file-excel" type="primary">导出excel</a-button>
                    <a-button style="margin-right:8px" icon="search" @click="loadTable(true)" type="primary">搜索</a-button>
                    <a-button style="margin-right:8px" icon="setting" @click="reset">重置</a-button>
                    
                </a-col>
            </a-row>
        </a-form>

        <a-table :columns="table.columns" :pagination="table.pagination" :scroll="{ x: 3200 }" @change="handleTableChange" rowKey="id" :data-source="table.loadData">
          <span slot="settleBatchName" slot-scope="text, record">
            <router-link :to="{name:'applicationSettleDetailCode',query:{settleBatchCode:record.settleBatchCode,flag:'applicationSettleGrantCode'}}">
                <a-button style="padding: 0" type="link" icon="eye">{{record.settleBatchName | filterMore(6)}}</a-button>
            </router-link>
          </span>
          <span slot="taskName" slot-scope="text, record">
            <router-link :to="{name:'applicationTaskDetailCode',query:{id:record.taskUid,taskId:record.taskId,flag:'applicationSettleGrantCode'}}">
                <a-button style="padding: 0" type="link" icon="eye">{{record.taskName | filterMore(6)}}</a-button>
            </router-link>
          </span>
          <span slot="idCard" slot-scope="text, record">
                 <a-popover title="身份证号" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.idCard}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.idCard | filterMore(7)}}</a-button>
                </a-popover>
            </span>
            <span slot="settleBatchCode" slot-scope="text, record">
                 <a-popover title="结算批次编号" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.settleBatchCode}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.settleBatchCode | filterMore(7)}}</a-button>
                </a-popover>
            </span>
            <span slot="taskId" slot-scope="text, record">
                 <a-popover title="任务编号" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.taskId}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.taskId | filterMore(7)}}</a-button>
                </a-popover>
            </span>
            <span slot="bankCard" slot-scope="text, record">
                 <a-popover title="银行卡" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.bankCard}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.bankCard | filterMore(7)}}</a-button>
                </a-popover>
            </span>
            <span slot="enterpriseName" slot-scope="text, record">
                 <a-popover title="关联企业" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.enterpriseName}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.enterpriseName | filterMore(13)}}</a-button>
                </a-popover>
            </span>
            <span slot="parkName" slot-scope="text, record">
                 <a-popover title="关联园区服务商" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.parkName}}</p>
                    </template>
                    <a-button style="padding: 0;color:#000" type="link">{{record.parkName | filterMore(13)}}</a-button>
                </a-popover>
            </span>
            <span slot="settleFailReason" slot-scope="text, record">
                 <a-popover title="结算失败原因" trigger="hover">
                    <template #content>
                    <p style="margin: 0;">{{record.settleFailReason}}</p>
                    </template>
                    <p style="margin: 0;cursor: pointer;">{{record.settleFailReason | filterMore(26)}}</p>
                </a-popover>
            </span>
            <span slot="settleStatus" slot-scope="text, record">
                <a-tag color="orange" v-if="text===1">待服务商审核</a-tag>
                <a-tag color="blue" v-if="text===2">结算申请中</a-tag>
                <a-tag color="green" v-if="text===3">结算成功</a-tag>
                <a-tag color="pink" v-if="text===4">部分结算成功</a-tag>
                <a-tag color="red" v-if="text===5">结算失败</a-tag>
                <a-tag color="purple" v-if="text===6">已驳回</a-tag>
                <a-tag color="cyan" v-if="text===7">银行发放中</a-tag>
            </span>
            <span slot="action" slot-scope="text, record">
                <span v-show="record.settleStatus === 3">
                     <a-divider type="vertical" v-action:settlePreviewReceipt/>
                    <a v-action:settlePreviewReceipt @click="$store.dispatch('allisReceipt',record.detailId)">预览回执单</a>
                </span>
            </span>
        </a-table>

    </div>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import store from '@/store'
import { 
  SETTLE_STATE_ALL_DATA,
  PAY_ALL_DATA,
  TASK_TYPE_ALL_DATA,
  SIGN_TYPE_ALL_DATA,
  SIGN_STATE_ALL_DATA,
  SERVICE_MODE_ALL_DATA
} from '@/config/baseData'
import { 
  COLUMNS_GRANT
} from './form'
import { 
    getSttleGrantList
} from '@/api/manage/sttle'
export default {
    name: 'grantDetailed',
    data () {
        return {
            expand:false,
            settleStateData:SETTLE_STATE_ALL_DATA,
            payData:PAY_ALL_DATA,
            taskStateData:TASK_TYPE_ALL_DATA,
            signTypeData:SIGN_TYPE_ALL_DATA,
            signStateData:SIGN_STATE_ALL_DATA,
            serviceModeData:SERVICE_MODE_ALL_DATA,
            table:{
                columns:[],
                loadData:[],
                pagination:{
                    pageNum:1,
                    total:0,
                    pageSize: 11,
                    showSizeChanger: true,
					showQuickJumper: true,
                    pageSizeOptions: ["10", "20", "50", "100"],
                    showTotal: total => `共有 ${total} 条数据`,
                }
            },
        }
    },
    filters: {
        filterMore (value,num) {
        if (!value) return ''
        if (value.length > num) {
            return value.slice(0,num) + '...'
        }
        return value
        }
    },
    computed: {
        ...mapGetters(['userInfo']),
    },
    beforeCreate() {
        this.form = this.$form.createForm(this, { name: 'enevt_form' });
    },
    mounted () {
         this.generateRoutes();
          this.initColumus();
    },
    methods: {
        ...mapActions({
            generateRoutes:'generateRoutes'
        }),
        initColumus(){
            let sttleGrantKey = this.userInfo.roleFiledAuthorities.sttleGrantKey;
            if(sttleGrantKey && sttleGrantKey.length >= 1){
                this.table.columns = COLUMNS_GRANT.filter(v=> !sttleGrantKey.includes(v.dataIndex));
            }else{
                this.table.columns = COLUMNS_GRANT;
            }
            this.loadTable(true);
        },
        async loadTable(flag){
            const {form: {getFieldsValue},} = this;
            let params = getFieldsValue();
            if(params.time && params.time.length > 0){
                params.beginTime = params.time[0];
                params.endTime = params.time[1];
            }
            if(flag){
                this.table.pagination.pageNum = 1;
                this.table.pagination.pageSize = 10;
            }
            params.pageNum = this.table.pagination.pageNum;
            params.pageSize = this.table.pagination.pageSize;
            const {code,data} = await getSttleGrantList(params);
            if(code ==='1'){
                this.table.loadData = data.content;
                this.table.pagination.total = data.total || 0;
            }
        },
        handleTableChange(pagination){
            this.table.pagination.pageNum = pagination.current;
            this.table.pagination.pageSize = pagination.pageSize;
            this.loadTable(false);
        },
        exportExcel(){
            const that = this;
            const {form: {getFieldsValue},} = this;
            let params = getFieldsValue();
            this.$confirm({
                content: '可筛选条件进行导出明细',
                cancelText:'关闭',
                okText:'导出',
                async onOk() {
                    return new Promise((resolve, reject) => {
                        const res = that.confirmOnOk(resolve, reject, params)
                        return res
                    }).catch(() =>{})
                },
                onCancel() {},
            })
        },
        async confirmOnOk(resolve, reject, params){
            const result = await store.dispatch('exportSttleGrantExecl',params);
            if(result)resolve(true);
        },
        reset(){
            this.form.resetFields();
            this.loadTable(true);
        }
    }
}
</script>
